<template>
  <div class="home-container">
    <div class="hd_bt">家政平台</div>
    <!-- 头部区域 -->
    <div class="header">
      <!-- 图片轮播 -->
      <div class="hd_img">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
          <van-swipe-item>3</van-swipe-item>
          <van-swipe-item>4</van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <!-- 宫格 -->
    <div class="other">
      <van-grid gutter="6" column-num="3">
        <van-grid-item text="入住商务部" />
        <van-grid-item text="家政求职" />
        <van-grid-item text="找家庭服务" />
        <van-grid-item text="线上家政培训" />
        <van-grid-item text="线上家政保险" />
        <van-grid-item text="合同" />
      </van-grid>
    </div>

    <!-- 其他 -->
    <div class="home_qita">
      <van-grid gutter="21" column-num="4" :border="ok">
        <van-grid-item text="月嫂"><van-image slot="icon" round src="https://img01.yzcdn.cn/vant/cat.jpeg"/></van-grid-item>
        <van-grid-item text="育婴师" ><van-image slot="icon" round src="https://img01.yzcdn.cn/vant/cat.jpeg"/></van-grid-item>
        <van-grid-item text="保洁/清洁" ><van-image slot="icon" round src="https://img01.yzcdn.cn/vant/cat.jpeg"/></van-grid-item>
        <van-grid-item text="保姆" ><van-image slot="icon" round src="https://img01.yzcdn.cn/vant/cat.jpeg"/></van-grid-item>
        <van-grid-item text="产康师" ><van-image slot="icon" round src="https://img01.yzcdn.cn/vant/cat.jpeg"/></van-grid-item>
        <van-grid-item text="早教/托育" ><van-image slot="icon" round src="https://img01.yzcdn.cn/vant/cat.jpeg"/></van-grid-item>
        <van-grid-item text="养老/陪护" ><van-image slot="icon" round src="https://img01.yzcdn.cn/vant/cat.jpeg"/></van-grid-item>
        <van-grid-item text="家装/搬家" ><van-image slot="icon" round src="https://img01.yzcdn.cn/vant/cat.jpeg"/></van-grid-item>
      </van-grid>
    </div>

    <!-- 公司 -->
    <div class="home_gongss">
      <!-- 标题 -->
      <van-cell class="home-title" title="湖南征信认证加服公司" icon="wap-home" />
      <!-- 卡片 -->
      <home-company :homeCompany="homeCompany"></home-company>
    </div>

    <!-- 成员 -->
    <div class="home_gongs">
      <!-- 标题 -->
      <van-cell class="home-title" title="诚信注册家服员" icon="manager" />
      <!-- 卡片 -->
      <home-staff :homeList="homeList"></home-staff>
    </div>
  </div>
</template>

<script>
import HomeCompany from '../../components/home-company/index'
import HomeStaff from '../../components/home-staff/index'
import { addHomeAtaff, addHomeCompany } from '../../api/home'

export default {
  name: 'homeContainer',
  components: {
    HomeCompany,
    HomeStaff
  },
  props: {},
  data () {
    return {
      ok: false,
      homeList: [], // 首页诚信注册家服员数据
      homeCompany: [] // 首页湖南征信家服公司数据
    }
  },
  computed: {},
  watch: {},
  created () {
    this.loadHomeAtaff()
    this.loadHomeCompany()
  },
  mounted () {},
  methods: {
    async loadHomeAtaff () {
      try {
        // 两个参数代表的是 分 一 页，一页展示三条数据
        const { data } = await addHomeAtaff(3, 1)
        // this.homeList = data
        this.homeList.push(...data)
        console.log(this.homeList)
      } catch (err) {
        console.log('请求失败', err)
      }
    },
    async loadHomeCompany () {
      try {
        // 两个参数代表的是 分 一 页，一页展示三条数据
        const { data } = await addHomeCompany(3, 1)
        this.homeCompany = data
        console.log(this.homeCompany)
      } catch (err) {
        console.log('请求失败', err)
      }
    }
  }
}
</script>
<style scoped lang='less'>
.hd_bt {
    width: 100%;
    height: 50px;
    background-color: #3F51B5;
    color: #fff;
    font-size: 16px;
    line-height: 50px;
    font-weight: bold;
    position: fixed;
    padding-left: 15px;
    top: 0;
    left: 0;
    z-index: 10;
  }

.header {
  height: 213px;
  background-color: #3F51B5;
  box-sizing: border-box;
  padding: 50px 15px 20px 15px;
  margin-bottom: 18px;
  .hd_img {
    height: 141px;
  }
}

.other {
  box-sizing: border-box;
  padding: 0 10px;
  margin-bottom: 14px;
  .van-grid-item {
    height: 87px;
    font-size: 12px;
    color: #101010;
  }
  /deep/.van-grid-item__content {
    background-color: #EEECEC;
  }
}

.home_qita {
  border-bottom: 10px solid #F9F5F5;
  /deep/.van-grid-item__content {
    padding: 0;
    margin: 0 0 10px 0;
  }
  .van-image {
    width: 55px;
    height: 55px;
  }
}

.home_gongss {
  border-bottom: 10px solid #F9F5F5;
}

.home-title {
  padding: 13px 0 12px 15px;
}

// 图片
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
